<script setup>
import { ref, reactive, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
let active = ref(0);
const routeData = reactive([
  { index: 0, title: "首页", url: "/", icon: "home-o" },
  { index: 1, title: "列表", url: "/list", icon: "comment-o" },
  { index: 2, title: "购物车", url: "/shoppingCart", icon: "shopping-cart-o" },
  { index: 3, title: "我的", url: "/my", icon: "contact" },
])
let isShowTabbar = ref(true);

watch(() => route.path, (newVal) => {
  isShowTabbar.value = routeData.find(item => item.url.includes(newVal));
}, { immediate: true })

</script>

<template>
  <main>
    <router-view></router-view>
  </main>

  <footer v-if="isShowTabbar">
    <van-tabbar v-model="active" route>
      <van-tabbar-item v-for="item in routeData" :key="item.index" :icon="item.icon" :to="item.url">{{ item.title
      }}</van-tabbar-item>
    </van-tabbar>
  </footer>
</template>

<style>
main {
  height: 100%;
}
</style>